<template>
    <p>Vuex</p>
    <p>count : {{ count }}</p>
    <p>tenTimes : {{ tenTimes }}</p>
    <button @click="updateVuexCount">修改count</button>
    <button @click="asyncIncrement">修改count-action</button>

    <p>moduleA: countA {{ store.state.a.countA }}</p>
    <p>moduleB: countB {{ store.state.b.countB }}</p>

    

    <p>moduleA: doubleCountA {{ store.getters.doubleCountA }}</p>
    <p>moduleB: doubleCountB {{ store.getters['b/doubleCountB'] }}</p>

    <button @click="moduleAincrementA">模块A-muation-触发</button>
    <button @click="moduleBincrementB">模块B-muation-触发</button>


    <button @click="moduleAasyncIncrementA">模块A-action-触发</button>
    <button @click="moduleBasyncIncrementB">模块B-action-触发</button>

    <button @click="moduleBemitGlobalMut">模块B触发全局-mut</button>
    <button @click="moduleBemitGlobalAct">模块B触发全局-act</button>
</template>

<script setup>
import { computed } from "vue";
import {useStore} from 'vuex'

// 获得Vuex实例化对象
const store = useStore()

const count = computed(()=>store.state.count)

const tenTimes = computed(()=>store.getters.tenTimes)

const updateVuexCount = ()=>{
    store.commit("increment", {count:20})
}

const asyncIncrement = ()=>{
    store.dispatch("asyncIncrement", {count:30})
}

// mutation
const moduleAincrementA = () =>{
    store.commit("incrementA")
}

const moduleBincrementB = ()=>{
    store.commit("b/incrementB")
}

// action
const moduleAasyncIncrementA = ()=>{
    store.dispatch("asyncIncrementA")
}

const moduleBasyncIncrementB = () =>{
    store.dispatch("b/asyncIncrementB")
}

// 触发全局
const moduleBemitGlobalMut = ()=>{
    store.dispatch("b/emitGlobalMut")
}


const moduleBemitGlobalAct = ()=>{
    store.dispatch("b/emitGlobalAct")
}
</script>